<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
    <h:head>
        <title>Import/Export</title>
        <style  type="text/css">
            #logo{
                position: absolute;
                margin-top: -26px;
            }
            #topContent{
                font-size: 25px; 
                /*margin-right: 27px;*/
                margin-top: 2px;
                /*                border-color: green;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
            }
            #topImages{
                /*margin-left: 86%;*/
                margin-top: 2px;
                margin-right: 20px;
                /*                border-color: blue;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #topText{
                /*margin-right: 15%;*/
                margin-top: 5px;
                /*                border-color: red;
                                border-width: 2px;
                                border-style: solid;*/
                text-align: right;
                float: right;
                display: inline;
            }
            #importexport{
                margin-left: 0;
                font-family:Lucida Sans Unicode;
                font-size: 52px;
                margin-top: 30px;
                margin-bottom: 0;
                text-align: center;
            }
            #notification{
                text-align: right;
                margin-right: 20px;
                margin-bottom: 10px;
            }
            
            .ui-layout, .ui-layout-doc, .ui-layout-unit, .ui-layout-wrap, .ui-layout-bd, .ui-layout-hd{
                border: none;
            }
        </style> 
    </h:head>
    <h:body>
        <p:layout fullPage="true">
            <p:layoutUnit position="north" resizable="true" size="180">
                <div id="logo">
                    <p>
                        <h:link outcome="home">
                            <h:graphicImage  value="/images/meteocal2.png" width="30px" height="30px"/>
                            <h style="margin-top: -26px; margin-left:33px ;position: absolute">MeteoCal</h>
                        </h:link>
                    </p>
                </div>
                <div id="topContent">
                    <h:form>
                        <div id="topImages">
                            <h:link outcome="settings">
                                <h:graphicImage  value="/images/settings.png" width="36px" height="36px"/>
                            </h:link>
                            &nbsp;
                            <h:link outcome="findUser">
                                <h:graphicImage  value="/images/findUser.png" width="36px" height="36px"/>
                            </h:link>
                        </div>
                        <div id="topText">
                            <p:commandLink action="#{loginBean.logout()}" value="Logout"/>
                            &nbsp;
                            <h>#{userBean.name}</h>
                            &nbsp;
                        </div>
                    </h:form>
                    <br></br>
                </div>
            </p:layoutUnit>
            <p:layoutUnit position="center" resizable="true" size="1000">
                <p id="importexport">
                        Export
                </p>
                &nbsp;
                <h:form id="exportForm">
                    <p:dataTable  id="tbl" var="event" value="#{importExportBean.events}"
                                  paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} "
                                  paginator="true"
                                  rows="10" style="margin-bottom:20px">
                        <!--
                        in case you add this code add an {Icons} tag to the paginatorTemplate property of dataTable
                        <f:facet name="{Icons}">
                            <h:commandLink>
                                <p:graphicImage name="/image/to/add.png" width="24"/>
                                <p:dataExporter type="csv" target="tbl" fileName="events" />
                            </h:commandLink>
                        </f:facet>
                        -->
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="ID" />
                            </f:facet>
                            <h:outputText value="#{event.id}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Title"/>
                            </f:facet>
                            <h:outputText value="#{event.title}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Start Date" />
                            </f:facet>
                            <h:outputText value="#{event.startDate}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="End Date" />
                            </f:facet>
                            <h:outputText value="#{event.endDate}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Location" />
                            </f:facet>
                            <h:outputText value="#{event.idLocation.locName}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Is Outdoor" />
                            </f:facet>
                            <h:outputText value="#{event.outdoor}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Bad Weather Level" />
                            </f:facet>
                            <h:outputText value="#{event.badWeatherLevel}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Is Public" />
                            </f:facet>
                            <h:outputText value="#{event.isPublic}" />
                        </p:column>
                        
                        <p:column>
                            <f:facet name="header">
                                <h:outputText value="Creator" />
                            </f:facet>
                            <h:outputText value="#{event.creator.name}" />
                        </p:column>
                        
                    </p:dataTable>
                    
                    <h:commandLink>
                        <p:button value="Download CSV"/>
                        <p:dataExporter type="csv" target="tbl" fileName="events" pageOnly="true" />
                    </h:commandLink>
                </h:form>                
                <p id="importexport">
                        Import
                </p>
                &nbsp;
                <h:form id="importForm" enctype="multipart/form-data">
                    <p:fileUpload allowTypes="/(\.|\/)(csv)$/" value="#{importExportBean.file}" mode="simple"/>
                    <h:messages  style="color: red; text-align: left"/>
                    <br/><br/>
                    <p:commandButton value="Submit" ajax="false" actionListener="#{importExportBean.handleFileUpload}" update="@all"/>
                </h:form>
                <p>Please, be aware that submitting a CSV file containing some events will overwrite your current calendar. Refer to the user manual for further information.</p>
            </p:layoutUnit>
            <p:layoutUnit position="west" resizable="true" size="60"/>
            <p:layoutUnit position="east" resizable="true" size="60"/>
            <p:layoutUnit position="south" resizable="true" size="60">
                <div id="notification">
                    <h:link outcome="notifications">
                        <h:graphicImage  value="/images/notification.png" width="40px" height="40px"/>
                    </h:link>
                </div>
            </p:layoutUnit>
        </p:layout>
    </h:body>
</html>
